<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type='application/javascript' src='/js/funcionesReto.js' ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="../public/js/comprobar.js" language="JavaScript"> </script>
<title>Nuevo Reto</title>

<link href="../public/css/estilosReto.css" rel="stylesheet" type="text/css">
</head>

<header>
    <h1> Nuevo Reto</h1>
</header>

<body>
<div class="formulario">

<div id="prueba">
</div>

<form id="formu" name="formu">

<fieldset> 
<legend>Datos del reto</legend>

<p class="datos">
    <label>Dificultad del reto</label>
	<label class="datos">
          <select class="select-style" id="dificultad">
          <option value="">-Elija dificultad-</option>
          <option value="Baja">Baja</option>
          <option value="Media">Media</option>
          <option value="Alta">Alta</option>
          <option value="Humillante">Humillante</option>
          </select>
    </label>
</p>

<p class="datos">
        <label>Categoría del reto</label>
        <label class="datos">
          <select class="select-style" id="categoria">
          <option value="">-Elija categoría-</option>
          <option value="du">Duelo</option>
          <option value="de">Desafío</option>
          </select>
        </label>
</p>

<p class="datos">
	<label for="idReto">Nombre del reto</label>
	<input id="idReto" name="idReto" type="text">
</p>
    
<p class="datos">
        <label>Puntuación</label>
        <label class="datos">
          <select class="select-style" id="puntuacion">
          <option value="">-Elija puntuación-</option>
          <option value="1">1</option>
          <option value="3">3</option>
          <option value="5">5</option>
          </select>
        </label>
</p>    

<p class="datos">
	<label for="idGrupo1">Id del grupo retante</label>
	<input id="idGrupo1" name="idGrupo1" type="text">
</p>

<p class="datos">
	<label for="idGrupo2">Id del grupo a retar</label>
	<input id="idGrupo2" name="idGrupo2" type="text">
</p>

</fieldset>
<!-- / --------------------------------------------------- -->

<input class="buttom" name="submit" id="submit" value="Crear Reto" type="submit" onClick="obtenValoresReto()">
</form>
</div>
</body>

<script>
	
	function retar() {
		var valor=document.getElementById('dificultad').value;
	    var request = new XMLHttpRequest();
		var peticion_str = 'http://localhost:3000/retar/dificultad/'+valor;
  		request.open('GET', peticion_str , true);
  		request.onreadystatechange= function(){
			if ( request.readyState == 4 ) {
				if (request.status == 200){
					console.log(request);
					var json;
					datos = eval ( 'json = '+ request.responseText );
					console.log(json);
				};
  			};	
		 		var i=1;
				document.formu.idR.options[1]= new Option(datos.reto1.idReto);
			
		};
  		request.send(null);
		
		
	};

	
	function mostrarInfo() {
		var valor=document.getElementById('idR').value;
	    var request = new XMLHttpRequest();
		var peticion_str = 'http://localhost:3000/retar/puntuacion/info';
  		request.open('GET', peticion_str , true);
  		request.onreadystatechange= function(){
			if ( request.readyState == 4 ) {
				if (request.status == 200){
					console.log(request);
					var json;
					datos = eval ( 'json = '+ request.responseText );
					console.log(json);
				};
  			};	
			document.formu.puntuacion.options[0]= new Option(datos.reto1.puntuacion);
			document.formu.info.options[0]= new Option(datos.reto1.informacion);
		};
  		request.send(null);
		
		
	};
	
</script>

</html>




